﻿@model vngoodlife.Article

@{
    ViewBag.Title = "ArticleCreate";
}


<link href="../../../Content/themes/base/autocomplete.css" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("../../../Content/ckeditor/ckeditor.js")"></script>
<div class="twocolumn">
@using (Html.BeginForm("ArticleCreate", "Article", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="column_left" style="width:75%">
    <div class="header">
	    <span>Tạo bài viết </span> 
        <div class="switchbutton">
                 <input type="submit" value="Lưu" style="margin: -10px 50px 0 0;"/>
                 <a href="@Url.Action("ArticleCreate", "Article")"  class="button">Làm Lại</a>
            
                <a href="@Url.Action("ArticleList_BackEnd", "Article")" class="button">Danh sách</a>
        </div>
    </div>

    <br class="clear"/>
   
	<div class="content">
     <div class="display-label error">
            <div class="errorcontent">
                <p>@Html.ValidationMessage("NoticePage")</p>
            </div>
        </div>

   
    @Html.AntiForgeryToken(vngoodlife.Util.AntiKey.EditSalt)
        <div>
            <div  class="editor_left">
                <div class="editor-label">
                    <label>Trạng thái :</label>
                    @*@Html.LabelFor(model => model.ArtStatusID)*@
                </div>
                <div class="editor-field">
                    @Html.DropDownListFor(model => model.ArtStatusID, (SelectList)ViewBag.ArticleStatusList)
                </div>
            </div>
            <div class="editor_middle">
                    <label>Highlight:</label>
                    <br />
                    @Html.EditorFor(model => model.Focus)
                
            </div>
            <div class="editor_middle">
                    <label>Kỳ(nếu có) :</label>
                    <br />
                    @Html.TextBox("artSubjectName", null,
                                 new
                                 {
                                     @style = "width:180px;",
                                     data_autocomplete = @Url.Action("GetSubject", "ArticleSubject"),
                                     targetid = "ArtSubjectID",
                                     multiple_line = "one"
                                 })
                    @Html.HiddenFor(model => model.ArtSubjectID)
                
            </div>
            <div  class="editor_right"> 
                 <div class="editor-label">
                    @Html.LabelFor(model => model.Photo) (W: H = 1.6 | 0.75 & W > 500 | 300)
                </div>
                <div class="editor-field">
                    <input name="uploadFile" id="File1" type="file" style="width: 250px;"/><br />
                </div>
            </div>
        </div>
        <br class="clear"/><br />

        <div>
             <div  class="editor_left">
                 <label>Image :</label>
                @Html.EditorFor(model => model.IsImage)
                <br />
                
                <label>Video :</label>
                @Html.EditorFor(model => model.IsVideo)
            </div>

             <div  class="editor_middle" >
                <div class="editor-label">
                    <label>Loại :</label>
                </div>
                <div class="editor-field">
                   @{Html.RenderAction("BuildArticleType_DropdownList", "Article",
                                    new { id = "articleType", textTargetID = "articleTypeNames", valueTargetID = "articleTypeIDs" });}
                   @Html.Hidden("articleTypeIDs", "0")
                </div>
                
            </div>
             <div id="articleTypeNames"  style="width: 660px; margin: 0 0 0 170px;padding: 10px 0 0 0px;">
                  
            </div>
        
        </div>
        <br class="clear"/><br />
        

        <div class="editor-label">
            <span>Tiêu đề :</span><div class="errorMgs" >@Html.ValidationMessageFor(model => model.Title)</div>
            @*@Html.LabelFor(model => model.Title)*@
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.Title, new { @style = "width:800px;", maxlength = "120" })
        </div>
        <br class="clear"/>
        <div class="editor-label">
            <label>Mô tả :</label><div class="errorMgs" >@Html.ValidationMessageFor(model => model.Description)</div>
            @*@Html.LabelFor(model => model.Description)*@
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.Description)
        </div>
        <br class="clear"/>

        <div class="editor-label">
            Tags:
        </div>
        <div class="editor-field">
           @* @Html.TextBox("artTagName2", null, new{style = "width:800px;"})*@
            @*@Html.Hidden("tagIDs","0")*@
            @Html.TextBox("artTagName", null,
                           new{style = "width:800px;",
                              data_autocomplete = @Url.Action("GetTags2", "Tags", new { articleID = "0" }),
                              targetid = "tagIDs",
                              multiple_line = "many"
                              })
            @Html.Hidden("tagIDs", "0")
        </div>
        <br class="clear"/>


        <div class="editor-label">
            Bài liên quan(5) :
        </div>
        <div class="editor-field">
             @Html.TextBox("RelatedArticleName", null,
                              new
                              {
                                  style = "width:800px;",
                                  data_autocomplete = @Url.Action("GetArticleName", "Article", new { articleID = "0" }),
                                  targetid = "relatedArticleID",
                                  multiple_line = "many"
                              })
            @Html.Hidden("relatedArticleID", "0")
        </div>
        <br class="clear"/>


        <div class="editor-label">
            <label>Nội dung :</label><div class="errorMgs" >@Html.ValidationMessageFor(model => model.Content)</div>
            @*@Html.LabelFor(model => model.Content)*@
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.Content, new { @class = "ckeditor" })
        </div>
        <script type="text/javascript">
            CKEDITOR.replace('Content', {
                BasePath: '../../../Content/ckeditor/',
                customConfig: 'CustomAdmin.js'
            });
	    </script>
   
        

        <p>
            <input type="submit" value="Lưu" style="margin: 10px 0 0 0;"/>
        </p>
    
    </div>
</div> @*end left column*@   
}

@* Begin right column window *@
        <div class="column_right" style="width:24%">
            <div class="header">
				<span>Tạo nhanh tags </span>
                <div class="switchbutton">
                    <div id="progress_tag">
                        <img src="../../../Content/images/general/loading.gif" alt="Loading"/>
                    </div>
                </div>
			</div>
			<br class="clear"/>
			<div class="content">
                @using (Ajax.BeginForm("QuickCreateTag", "Tags",
                                       new AjaxOptions
                                       {
                                           UpdateTargetId = "tagMgs",
                                           HttpMethod = "GET",
                                           InsertionMode = InsertionMode.Replace,
                                           LoadingElementId = "progress_tag",
                                           OnSuccess = "ClearValueTag"
                                       }))
                {
                @Html.TextBox("newTagName", null, new { style = "width:150px;" })
                <input type="submit" value="Tạo tag" style="margin: 10px 0 0 0; padding: 3px 3px 3px 3px" />
                }
                <div id="tagMgs" style="color:Red;"></div>
            </div>
        </div>
        
        <div style="float:right; width:200px; height:7px;"></div>
        <div class="column_right" style="width:24%">
            <div class="header">
				<span>Tạo nhanh chủ đề </span>
                <div class="switchbutton">
                    <div id="progress_sub">
                        <img src="../../../Content/images/general/loading.gif" alt="Loading"/>
                    </div>
                </div>
			</div>
			<br class="clear"/>
			<div class="content">
            @using (Ajax.BeginForm("QuickCreateSubject", "ArticleSubject",
                                       new AjaxOptions
                                       {
                                           UpdateTargetId = "subMgs",
                                           HttpMethod = "GET",
                                           InsertionMode = InsertionMode.Replace,
                                           LoadingElementId = "progress_sub",
                                           OnSuccess = "ClearValueSubject"
                                       }))
            {
            @Html.TextBox("newSubjectName", null, new { style = "width:235px;" })
            <input type="submit" value="Tạo chủ đề" style="margin: 10px 0 0 0; padding: 3px 3px 3px 3px" />
            }
                <div id="subMgs" style="color:Red;"></div>
            </div>
        </div>
        
        @*end right column*@

</div>
<script type="text/javascript">
    function ClearValueSubject() {
        $("#newSubjectName").val("");
    }
    function ClearValueTag() {
        $("#newTagName").val("");
    }
</script>
 @*<script type="text/javascript">

     $(function () {
         function split(val) {
             return val.split(/,\s*/);
         }
         function extractLast(term) {
             return split(term).pop();
         }

         $("#articleType").change(function () {
             var typeids = split($("#articleTypeIDs").val());
             // remove the current input
                typeids.pop();
             // add the selected item

             var str = "";
             var idss = "";
             $("#articleType option:selected").each(function () {
                 str  = $(this).text() + " ";
                 idss = $(this).val();
             });

             if (idss != '' && !contains(typeids, idss)) {
                 typeids.push(idss);
             }
             // add placeholder to get the comma-and-space at the end
             typeids.push("");
             $("#articleTypeNames").append(str +"|"+ idss + ", ");
             $("#articleTypeIDs").val(typeids.join(","));

         });

         function contains(arr, obj) {
             var i = arr.length;
             while (i--) {
                 if (arr[i] == obj) {
                     return true;
                 }
             }
             return false;
         }

         $("#artTagName2").bind("keydown", function (event) {
             if (event.keyCode === $.ui.keyCode.TAB &&
                      $(this).data("autocomplete").menu.active) {
                 event.preventDefault();
             }
         });
         $("#artTagName2").autocomplete({
             source: '@Url.Action("GetTags2","Tags")',
             search: function () {
                 // custom minLength
                 var term = extractLast(this.value);
                 if (term.length < 1) {
                     return false;
                 }
             },
             focus: function () {
                 // prevent value inserted on focus
                 return false;
             },
             select: function (event, ui) {
                 var terms = split(this.value);
                 var ids = split($("#tagIDs").val());
                 // remove the current input
                 terms.pop();
                 ids.pop();
                 // add the selected item
                 terms.push(ui.item.value);
                 if (ui.item.id != '0' && !contains(ids, ui.item.id)) {
                     ids.push(ui.item.id);
                 }

                 // add placeholder to get the comma-and-space at the end
                 terms.push("");
                 ids.push("");

                 this.value = terms.join(", ");
                 $("#tagIDs").val(ids.join(","));

                 return false;
             }
         });

     });


     $("#artTagName").autocomplete({
         source: '@Url.Action("GetTags","Tags")',
         select: function (event, ui) {
             $("#tagID").val(ui.item.id);
         }
     });
</script>
*@